<script setup>
import { reactive, ref, watch } from 'vue';
//导入axios发送请求
import request  from "../axios/axios"
//导入user数据
import {userInfoStore} from '../stores/UserInfoPinaStores.js'
let user=userInfoStore();
let queryList=[];


//定义寝室查询名字
let dormitoryName=ref("")
//定义寝室信息展示变量
let showDormitoryName=ref("")
//宿舍id
let showDormitoryId=ref("")
//宿舍费用
let showDormitoryFee=ref("")

//定义中间显示的当前页码数
let pageShow=ref(1);
//定义总页数
let totalPage=ref(2);
//定义页面大小
let pageSize=ref(5);
//定义显示组件的东西
let showComponentFlag=false;

let userList=reactive({
    list:[]
})


//监听页码的数据改变执行函数
watch(pageShow,()=>{
    //数据改变执行函数
    console.log(pageShow.value)
    queryUserDepositDormitory()

})
//监听查询

async function queryDormitory(){
    //用户寝室信息查询
    console.log(dormitoryName.value)
    let {data} = await request.get("/checkDormitoryName"
        ,
        {
            params:{
                dormitorynname:dormitoryName.value
            }
        }
    )
//根据状态码返回结果
        console.log(data)
    if(data.statusCode==205){
        let dormitoryInfo=data.data;
        console.log(dormitoryInfo);
        //变更信息
        showDormitoryId.value=dormitoryInfo.dormitoryId
        showDormitoryName.value=dormitoryInfo.dormitoryName
        showDormitoryFee.value=dormitoryInfo.dormitoryMonkey
        showComponentFlag=true;
    }else{
        alert("查询失败")
        showComponentFlag=false;
    }
}

//用户信息查询功能实现

//发送请求获取数据
async  function queryUserDepositDormitory(){
    //发送数据
    let {data} = await request.get("/userQueryAll",
        {
            params:{
                userId:user.getUserId,
                page:pageShow.value,
                pageSize:pageSize.value
            }
        }
        
    )

    console.log(data);
    if(data.statusCode==200){
        //给列表赋值
            //获取赋值的东西
        //获取数据
        totalPage.value=data.pageTotal;

        for(var i=0; i<data.pageList.length;i++){
            queryList[i]=data.pageList[i]
        }
        console.log(queryList)
        userList.list=queryList;
    }
}

//改变数据
function addClick(){
    //定义一个总页数
    if(pageShow.value<totalPage.value){
        pageShow.value++;
    }
    
}
function subClick(){
    
    if(pageShow.value>1){
        pageShow.value--;
    }
}
    
    



//修改删除的时候传入的值是索引
//根据索引获取数组中的某一项 删除的时候也是   先获取对象，然后发送数据到后端  ，修改也是
</script>

<template>
    <div class="showQuery" >
            
        <!-- 查充值记录 -->
        <div class="Despoit">
            <h1>用户查询界面</h1>
            <button @click="queryUserDepositDormitory()" class="btnStyle">查询</button>

            <div class="showQueryContent">
                <!-- <button @click="queryUserDepositDormitory()" class="btnStyle">查询</button> -->
                <table class="queryTableShowInfo">
                    <tr class="trb"  v-if="showComponentFlag">
                        <td>用户id</td>
                        <td>用户名字</td>
                        <td>寝室名字</td>
                        <td>充值金钱</td>
                        <td>充值时间</td>
                    </tr>

                    <tr v-for="(item,index) in userList.list" key="index" class="trb" >
                        <td >{{item.userId}}</td>
                        <td>{{item.userName}}</td>
                        <td>{{item.dormitoryName}}</td>
                        <td>{{item.depositMonkey}}</td>
                        <td>{{new Date(item.depositTime)}}</td>
                    </tr>
                </table>
            </div>
            <div class="showQueryFooter">
                <!-- 根据页数判断 -->

                <div class="showFooterButton" >

                    <button @click="subClick" class="btnStyle">&lt;</button> ||| <span v-text="pageShow"></span> ||| <button @click="addClick" class="btnStyle" >&gt;</button> ||||| 总页数:<span v-text="totalPage"></span>
                </div>
                <!-- <button @click="queryUserDepositDormitory()">test</button> -->
                
                

            </div>
        </div>
        <div class="Dormitory">
            <div class="DormitoryName">
               
                    寝室信息查询<input type="text" v-model="dormitoryName" /><button @click="queryDormitory()">查询</button>
            </div>
            <div style="width: 100%; height: 80%;">
                <!-- 寝室信息展示 -->
                <table style="width: 100%; height: 100%;">
                    <tr class="trb">
                        <td class="name">寝室ID</td ><td class="content" v-text="showDormitoryId"></td> 
                    </tr>
                    <tr class="trb">
                        <td class="name">寝室名字</td ><td class="content" v-text="showDormitoryName" ></td>
                    </tr>

                    <tr class="trb">
                        <td class="name">寝室水电费</td ><td class="content" v-text="showDormitoryFee"></td>
                    </tr>           
                </table>
            </div>
        </div>
        
    </div>
</template>

<style scoped>

.name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: rgb(222, 241, 241); 
  }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }

   /**
    按钮样式
    */
    .btnStyle{
            height: 43px;   
            width: 80px;
            border-radius: 10px;
            border: 0px;
            background-color: rgb(138, 236, 73);
        }
        .btnStyle:hover{
            background-color: aqua;
        }
        .btnStyle:active{
            background-color: rgb(125, 139, 179);
        }
    /**
     * 
     */
     .showQueryContent{
        width: 80%;
        height: 80%;
     }
     .showQueryFooter{
        width: 80%;
        height: 20%;
     }

     /**
      * 表格设置
      */
      .queryTableShowInfo{
        width: 100%;
        height: 100%;
        background-color: aliceblue;
        border: 2px solid   ;
      }
</style>
